<template>
  <div class="desc">
    <img
      class="banner"
      :src="banner.pic"
      alt=""
    >
    <section class="desc-content">
      <div class="content-nav">
        <div
          :class="['content-nav-item',bigIndex == index ? 'active' : '']"
          v-for="(item,index) in columns"
          :key="index"
          @click="clickBigItem(index)"
        >
          {{item.title}}
        </div>
      </div>
      <div class="content-wrapper">
        <div class="right">
          <p class="right-title">{{content.title}}</p>
          <div
            class="right-content"
            v-html="content.content"
          ></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bigIndex: 0,
      smallIndex: 0,
      banner: {},
      columns: [],
      content: {}
    };
  },
  mounted() {
    this.getBanner();
    this.getTypeColumn();
  },
  methods: {
    async getBanner() {
      let res = await this.$fetch("/api/getBanner", {
        type: 2
      });
      if (res.data.length) {
        this.banner = res.data[0];
      }
    },
    async getTypeColumn(type) {
      let res = await this.$fetch("/api/getBusiness", {});
      if (res.data.length) {
        this.columns = res.data;
        this.getColumnDetail(this.columns[0].id);
      }
    },
    async getColumnDetail(id) {
      let res = await this.$fetch("/api/businessShow", {
        business_id: id
      });
      if (res.data) {
        this.content = res.data;
      }
    },
    clickBigItem(index) {
      this.bigIndex = index;
      this.getColumnDetail(this.columns[index].id);
    }
  }
};
</script>
<style lang="scss" scoped>
.desc {
  background: #fafafa;
  min-height: 100vh;
    padding-bottom: 50px;
  .banner {
    width: 100%;
    min-width: 1200px;
    height: 380px;
  }
  .desc-content {
    width: 1200px;
    margin: 0 auto;
    .content-nav {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .content-nav-item {
        flex: 1;
        height: 40px;
        line-height: 40px;
        color: #333;
        text-align: center;
        background: white;
        font-size: 16px;
        cursor: pointer;
      }
      .active {
        font-size: 18px;
        color: white;
        line-height: 60px;
        background: #319d3a;
        height: 60px;
        font-weight: bold;
      }
    }
    .content-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .left {
        width: 265px;
        background: white;
        padding: 0 20px;
        box-sizing: border-box;
        .left-item {
          font-size: 16px;
          line-height: 60px;
          text-align: center;
          height: 60px;
          border-bottom: 1px solid #e5e5e5;
          cursor: pointer;
        }
        .active {
          color: #319d3a;
        }
      }
      .right {
        padding: 0 30px;
        box-sizing: border-box;
        width: 1200px;
        background: white;
        min-height: 100px;
        .right-title {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 30px;
        }
        .right-content {
          text-align: left;
          font-size: 16px;
          text-indent: 32px;
          line-height: 30px;
          p {
            margin-bottom: 30px !important;
          }
        }
      }
    }
  }
}
</style>